<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Água Preciosa - Bem de todos</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet"
	href="${resource(dir: 'css', file: 'bootstrap.css')}" type="text/css">
	
<link rel="stylesheet"
	href="${resource(dir: 'css', file: 'contextMenu.css')}" type="text/css">

<link rel="stylesheet"
	href="${resource(dir: 'css', file: 'aqua.css')}" type="text/css">

<link rel="stylesheet"
	href="${resource(dir: 'css', file: 'jRating.jquery.css')}" type="text/css">
		
<script type="text/javascript"
	src="http://code.jquery.com/jquery-latest.min.js"></script>

<g:javascript src="bootstrap.js" />
<g:javascript src="jRating.jquery.js" />	
<g:javascript src="application.js" />

<!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

<!-- CSS code from Bootply.com editor -->

<style type="text/css">
.wrap {
	margin-left: 0;
	margin-right: 0;
}
</style>

<g:layoutHead />
<r:layoutResources />
</head>

<!-- HTML code from Bootply.com editor -->

<body onload="${pageProperty(name:'body.onload')}">
	 <div class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <g:link controller="index" action="index" class="navbar-brand">Água Preciosa</g:link>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><g:link controller="index" action="index" >Início</g:link></li>
            <li><a href="sobre">Sobre</a></li>
            <li><a href="contato">Contato</a></li>
            <g:if test="${!session.usuarioLogado }">
				<li>
					<g:link controller="usuario" action="registrar" >
						Registre-se
					</g:link>
				</li>
			</g:if>
			<g:if test="${session.usuarioLogado }">
				<li>
					<g:link controller="usuario" action="perfil" >
						Perfil
					</g:link>
				</li>
			</g:if>
          </ul>
          
          <g:if test="${!session.usuarioLogado }">
				<g:form controller="usuario" action="logon"  class="navbar-form navbar-right" role="form">
					<div class="form-group">
		              <input type="text" placeholder="Login" name="login" class="form-control"/> 
		            </div>
		            <div class="form-group">
		              <input type="password" placeholder="Senha" name="senha" class="form-control"/>
		            </div>
		            <button type="submit" class="btn btn-success">Entrar</button>
				</g:form>
			</g:if>
			<g:if test="${session.usuarioLogado }">
				<p class="text-right" style="padding-top: 10px; color:white;">Bem vindo, 
				<strong>${session.usuarioLogado.nome}</strong>
				<g:link controller="usuario" action="logout">
					(sair)
				</g:link>
				</p>
			</g:if>
			
          
        </div><!--/.nav-collapse -->
      </div>
    </div>

	<div class="container">

		<!-- Example row of columns -->
		<div class="row">
		  <div class="col-md-10">
		  	<g:if test="${flash.message }">
		  		<div class="alert alert-success alert-dismissable">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
					<g:message error="${flash.message}" />
				</div>
		  	</g:if>
		  	<g:layoutBody />
		  </div>
		  <div class="col-md-2">
		  	<h2>Doacões</h2>
		  	<p>
		  		Deseja ajudar as vítimas de problemas com água?
		  	</p>
		  	<div class="pull-left">
				<a data-link="Logo" href="https://thewaterproject.org/donate-start">
	   				<img src="http://thewaterproject.org/images/logo-tab.png" width="110" alt="The Water Project - Give Water" class="logotab">
	   			</a>
	   			<a href="http://www.unesco.org/donate/" rel="localize[header.logo]">
	   				<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/UNESCO.svg/220px-UNESCO.svg.png" alt="UNESCO" id="logo" width="110">
	   			</a>		  	
		  	</div>
		  </div>
		</div>
		<hr>

		<footer>
			<p>&copy; Mário Melo 2013
				<div class="pull-right" style="display:none" id="link">
					<a href="https://twitter.com/intent/tweet?button_hashtag=AguaPreciosa&text=${createLink(controller:'index', action:'index', absolute:'true')}" class="twitter-hashtag-button" data-lang="pt-br" data-related="mariovmelo" id="link_int_twitter">
						Tweet #AguaPreciosa
					</a>
					<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
				</div>
			</p>
		</footer>
		
		<div id="spinner" class="spinner" style="display:none;">
			Carregando....
		</div>
		
	</div>
	<!-- /container -->


</body>
</html>